<template>
	<div class="clearfloat padding-across-10" style="height:100%;margin-bottom: 100px" v-loading="loading" element-loading-text="拼命加载中">
		<div class="navList">
			<div>
				<el-button class="mb5" size="small" type="primary" @click="reloadDatas">
					<i v-if="!refreshObj.waitting" class="el-icon el-icon-eleg-icon_refresh el-icon--left"></i>
					<i v-else class="el-icon-loading" style="font-size:25px"></i>刷新
				</el-button>
				<el-button class="mb5" size="small" type="danger" @click="openFailure">
					<i class="el-icon-eleg-icon_error-triangle el-icon--left"></i>故障记录
				</el-button>
				<el-button class="mb5" size="small" type="danger" @click="openExp">
					<i class="el-icon-eleg-icon_clipboard el-icon--left"></i>异常报告
				</el-button>
				<el-button class="mb5" :disabled="!IsOnLine" size="small" type="primary" @click="SyncDeviceUseSumary">
					<i v-if="!SyncObj.waitting" class="el-icon el-icon-eleg-icon_download el-icon--left"></i>
					<i v-else class="el-icon-loading"></i>同步
				</el-button>
			</div>
			<div v-if="!isMobile">
				<el-tag type="gray" style="float: right;font-size:16px">
					<a style="cursor: pointer;" @click="returnDetail">还书次数：{{deviceUseSumaryData.returncount}}</a>
				</el-tag>
				<el-tag type="success" style="float: right;font-size:16px;margin-right: 5px">
					<a style="cursor: pointer;" @click="borrowDetail">借阅次数：{{deviceUseSumaryData.borrowcount}}</a>
				</el-tag>
				<el-tag type="primary" style="float: right;font-size:16px;margin-right: 5px">
					<a style="cursor: pointer;" @click="loginDetail">登录次数：{{deviceUseSumaryData.logincount}}</a>
				</el-tag>
				<span style="font-size: 15px;float: right">今日使用统计：</span>
			</div>
            <div v-else>
				<span style="font-size: 15px;float: right">今日使用统计：</span>
				<el-tag type="gray" style="float: right;font-size:16px">
					<a style="cursor: pointer;" @click="returnDetail">还书次数：{{deviceUseSumaryData.returncount}}</a>
				</el-tag>
				<el-tag type="success" style="float: right;font-size:16px;margin-right: 5px">
					<a style="cursor: pointer;" @click="borrowDetail">借阅次数：{{deviceUseSumaryData.borrowcount}}</a>
				</el-tag>
				<el-tag type="primary" style="float: right;font-size:16px;margin-right: 5px">
					<a style="cursor: pointer;" @click="loginDetail">登录次数：{{deviceUseSumaryData.logincount}}</a>
				</el-tag>
			</div>
		</div>
		<el-row :gutter="5">
			<el-col :span="24">
				<!-- 设备详情 -->
				<div class="bg-purple" style="margin-top: 5px">
					<div class="panel-title">
						<span>设备码：{{this.templateObj.sn}}</span>
						<span style="font-size: 13px;">(最后一次与服务器连接时间：{{pingTime}})</span>
						<img class="title-img" v-bind:src="imgTitleUrl">
					</div>
					<div>
						<el-table border style="width: 100%;margin-top: 1px" :data="devideInfoData">
							<el-table-column label="名称" align="center" prop="name">
							</el-table-column>
							<el-table-column label="型号" align="center" prop="model"></el-table-column>
							<el-table-column label="应用名称" align="center" prop="appname"></el-table-column>
							<el-table-column label="应用版本" align="center" prop="appver"></el-table-column>
							<el-table-column label="状态" align="center">
								<template slot-scope="scope">
									<el-tag v-if="scope.row.online" type="success">
										<li class="el-icon-circle-check el-icon--left"></li>在线
									</el-tag>
									<el-tag v-else type="gray">
										<li class="el-icon-circle-close el-icon--left"></li>离线
									</el-tag>
								</template>
							</el-table-column>
						</el-table>
					</div>
				</div>
			</el-col>
			<el-row :gutter="10">
				<el-col :span="12">
					<div class="grid-content bg-purple">
						<div>
							<template>
								<div class="inner-section">
									<div v-if="machineCaptureDatas && machineCaptureDatas.length > 0">
										<el-carousel indicator-position="none" trigger="click" height="450px">
											<el-carousel-item v-for="item in machineCaptureDatas">
												<!--<img title="点击查看更多" v-bind:src="item.path" height="100%" width="100%" @click="goMachineCapture" />-->
												<div style="position:relative ">
													<div style="position:absolute; right: 0px; top:5px; color:#fff;background-color: #000;
																opacity: 0.5;font-size: 13px;border-radius: 3px;padding: 0px 5px;">{{item.time}}</div>
													<img title="点击查看更多" v-bind:src="item.path" height="100%" width="100%" @click="goMachineCapture" />
												</div>
											</el-carousel-item>
										</el-carousel>
									</div>
									<img v-else v-bind:src="imgUrl" style="width: 100%;height: 370px;padding-top: 1px">
								</div>
							</template>
						</div>
					</div>
				</el-col>
				<el-col :span="12">
					<el-row :gutter="5">
						<!-- 设备 -->
						<el-col :span="24" style="padding-top: 5px">
							<div class="bg-purple">
								<div class="panel-title">
									<span style="width: 70%">设备信息</span>
									<img class="title-img" v-bind:src="imgTitleUrl">
								</div>
								<el-row :gutter="5">
									<el-col :span="isMobile ? 24 : 12" style="margin-top: 3px;">
										<div class="grid-content1 bg-purple">
											<div class="detail-section" v-loading="restartObj.waitting">
												<div class="section-left">
													<div class="detail-title">
														<span style="font-weight: bold">远程控制</span>
														<i class="fa fa-gears" style="color: #EE7942;padding-top: 10px;font-size: 30px"></i>
													</div>
												</div>
												<div class="section-right" style="text-align: center">
													<div>
														<el-button :disabled="!IsOnLine" v-if="!restartObj.waitting" type="success" size="small" @click="restart">重启</el-button>
														<i v-else class="el-icon-loading" style="font-size:25px"></i>
													</div>
													<div>
														<el-button :disabled="!IsOnLine" v-if="!closeObj.waitting" type="danger" size="small" @click="close">关机</el-button>
														<i v-else class="el-icon-loading" style="font-size:25px"></i>
													</div>
												</div>
											</div>
										</div>
									</el-col>
									<el-col :span="isMobile ? 24 : 12" style="margin-top: 3px;" v-if="configDatas.documentlocation !== undefined">
										<div class="grid-content1 bg-purple">
											<div class="detail-section">
												<div class="section-left">
													<div class="detail-title">
														<i class="el-icon el-icon-eleg-icon_pin" style="color: #13ce66;font-size: 30px"></i>
													</div>
												</div>
												<div class="section-right">
													<div>
														<small style="font-weight: bold;">馆藏地</small>
													</div>
													<div v-if="configDatas.documentlocation != null && configDatas.documentlocation != ''"><small>{{configDatas.documentlocation}}</small></div>
													<div v-else><small>未知</small></div>
												</div>
											</div>
										</div>
									</el-col>
									<el-col :span="isMobile ? 24 : 12" style="margin-top: 3px;">
										<div class="grid-content1 bg-purple">
											<div class="detail-section">
												<div class="section-left">
													<div class="detail-title">
														<i class="fa fa-credit-card fa-2x" style="color: #13ce66"></i>
													</div>
												</div>
												<div class="section-right">
													<div>
														<small style="font-weight: bold;">卡片类型</small>
													</div>
													<div>
														<small v-if="configDatas.supportcardtype != null" style="">{{configDatas.supportcardtype}}</small>
														<small v-else style="">未知</small>
													</div>
												</div>
											</div>
										</div>
									</el-col>
									<el-col :span="isMobile ? 24 : 12" style="margin-top: 3px;" v-if="statusDatas.mqttserver !== undefined">
										<div class="grid-content1 bg-purple" style="background-color: #1a9624">
											<div class="detail-section">
												<div class="section-left">
													<div class="detail-title">
														<i class="fa fa-envelope" style="color:#93ff9c;font-size: 80px"></i>
													</div>
												</div>
												<div class="section-right" style="text-align: left;padding-left: 20px">
													<div><span style="font-weight: bold;color: white">消息服务</span></div>
													<div>
														<span style="font-weight: bold;color: white">状态：{{statusDatas.mqttserver === 0 ? '打开' : '关闭'}}</span>
													</div>
												</div>
											</div>
										</div>
									</el-col>
								</el-row>
							</div>
						</el-col>
						<!-- 其他信息 -->
						<el-col :span="24" style="padding-top: 5px" v-if="statusDatas.printerstatus !== undefined && statusDatas.rfidreaderstatus !== undefined">
							<div class="bg-purple">
								<div class="panel-title">
									<span style="width: 70%">其他信息</span>
									<img class="title-img" v-bind:src="imgTitleUrl">
								</div>
								<el-row :gutter="5">
									<el-col style="margin-top: 3px" :span="8" v-if="statusDatas.printerstatus !== undefined">
										<div class="grid-content1 bg-purple">
											<div class="detail-section">
												<div class="section-left">
													<div class="detail-title">
														<i v-if="!statusDatas.printerstatus" class="fa fa-print fa-2x" style="color: #13ce66;"></i>
														<i v-else class="fa fa-print fa-2x" style="color: #ff6d6d;"></i>
													</div>
												</div>
												<div class="section-right">
													<div>
														<small style="font-weight: bold;">打印机</small>
													</div>
													<div>
														<small>状态：
														<el-tag v-if="statusDatas.printerstatus === 1" type="danger">未连接</el-tag>
														<el-tag v-if="statusDatas.printerstatus === 2" type="danger">打印失败</el-tag>
														<el-tag v-if="statusDatas.printerstatus === 0" type="success">已连接</el-tag>
													</small>
													</div>
												</div>
											</div>
										</div>
									</el-col>
									<el-col style="margin-top: 3px" :span="8" v-if="statusDatas.rfidreaderstatus !== undefined">
										<div class="grid-content1 bg-purple">
											<div class="detail-section">
												<div class="section-left">
													<div class="detail-title">
														<i v-if="statusDatas.rfidreaderstatus === 0" class="fa fa-bullseye fa-2x" style="color: #13ce66"></i>
														<i v-else class="fa fa-bullseye fa-2x" style="color: #ff6d6d"></i>
													</div>
												</div>
												<div class="section-right">
													<div>
														<small style="font-weight: bold;">RFID设备</small>
													</div>
													<div style="margin-top: 2px">
														<small>状态：
														<el-tag v-if="statusDatas.rfidreaderstatus === 1" type="danger">关闭</el-tag>
														<el-tag v-if="statusDatas.rfidreaderstatus === 0" type="success">打开</el-tag>
														<el-tag v-if="statusDatas.rfidreaderstatus === 2" type="success">扫描失败</el-tag>
													</small>
													</div>
												</div>
											</div>
										</div>
									</el-col>
								</el-row>
							</div>
						</el-col>
						<!-- 刷卡器 -->
						<el-col :span="24" style="padding-top: 5px" v-if="statusDatas.cardreader_of_barcode_status !== undefined && statusDatas.cardreader_of_rfid_status !== undefined">
							<div class="bg-purple">
								<div class="panel-title">
									<span style="width: 70%">刷卡器</span>
									<img class="title-img" v-bind:src="imgTitleUrl">
								</div>
								<el-row :gutter="5">
									<el-col style="margin-top: 3px" :span="12" v-if="statusDatas.cardreader_of_barcode_status !== undefined">
										<div class="grid-content1 bg-purple">
											<div class="detail-section">
												<div class="section-left">
													<div class="detail-title">
														<i v-if="!statusDatas.cardreader_of_barcode_status" class="fa fa-barcode  fa-2x" style="color: #13ce66"></i>
														<i v-else style="color: #999999" class="fa fa-barcode fa-2x"></i>
													</div>
												</div>
												<div class="section-right">
													<div><small style="font-weight: bold;">条形码刷卡器</small></div>
													<div>
														<small>状态：
														<el-tag v-if="statusDatas.cardreader_of_barcode_status" type="danger">关闭</el-tag>
														<el-tag v-else type="success">打开</el-tag>
													</small>
													</div>
												</div>
											</div>
										</div>
									</el-col>
									<el-col style="margin-top: 3px" :span="12" v-if="statusDatas.cardreader_of_rfid_status !== undefined">
										<div class="grid-content1 bg-purple">
											<div class="detail-section">
												<div class="section-left">
													<div class="detail-title">
														<i v-if="!statusDatas.cardreader_of_rfid_status" class="fa fa-newspaper-o fa-2x" style="color: #13ce66"></i>
														<i v-else style="color: #999999" class="fa fa-newspaper-o fa-2x"></i>
													</div>
												</div>
												<div class="section-right">
													<div><small style="font-weight: bold;">RFID刷卡器</small></div>
													<div>
														<small>状态：
														<el-tag v-if="statusDatas.cardreader_of_rfid_status" type="danger">关闭</el-tag>
														<el-tag v-else type="success">打开</el-tag>
													</small>
													</div>
												</div>
											</div>
										</div>
									</el-col>
								</el-row>
							</div>
						</el-col>
					</el-row>
				</el-col>
			</el-row>
		</el-row>

		<!-- 设置馆藏地 -->
		<el-dialog title="馆藏地" v-model="documentlocationDialog" size='tiny'>
			<el-table border style="width: 100%;font-size: 10px;">
				<!-- <el-table-column type="index"></el-table-column>
        		<el-table-column label="层号" align="center" prop="number"></el-table-column>
        		<el-table-column label="值" align="center" prop="value"></el-table-column> -->
			</el-table>
		</el-dialog>
		<!-- 设置录像文件大小弹窗 -->
		<el-dialog title="录像文件大小" v-model="recordFileSizeDialog" :class="[dialog-tiny-width]">
			<span>
        		<div style="margin-top: 15px">
        			<small style="font-size: 15px;font-weight: bold">当前录像文件大小：</small>
        			<small style="font-size:15px">{{recordFileSizeObj.recordfilesize}}(MB)</small>
        		</div>
        		<div style="margin-top: 15px">
        			<small style="font-size: 15px;font-weight: bold">设置录像文件大小：</small>
        			<el-input-number :min="1024" :max="4096" size="small" v-model="defaultRecordFileSize"></el-input-number>
        		</div>
        	</span>
			<span slot="footer" class="dialog-footer">
        		<el-button v-if="!setRecordFileSizeObj.waitting" type="primary" @click="changeRecordFileSize">确 定</el-button>
        		<i v-else class="el-icon-loading" style="font-size:25px"></i>
        	</span>
		</el-dialog>
		<!-- 设置录像时间间隔 -->
		<el-dialog title="录像时间间隔" v-model="recordDurationDialog" :class="[dialog-tiny-width]">
			<span>
        		<div style="margin-top: 15px">
        			<small style="font-size: 15px;font-weight: bold">当前录像时间间隔：</small>
        			<small style="font-size:15px">{{recordDurationObj.recordfileduration}}(Min)</small>
        		</div>
        		<div style="margin-top: 15px">
        			<small style="font-size: 15px;font-weight: bold">设置录像时间间隔：</small>
        			<el-input-number :min="5" :max="30" size="small" v-model="defaultRecordDuration"></el-input-number>
        		</div>
        	</span>
			<span slot="footer" class="dialog-footer">
        		<el-button v-if="!setRecordDurationObj.waitting" type="primary" @click="changeRecordDuration">确 定</el-button>
        		<i v-else class="el-icon-loading" style="font-size:25px"></i>
        	</span>
		</el-dialog>
		<!-- 修改名称 -->
		<el-dialog title="设备重命名" v-model="renameDeviceDialog" :class="[dialog-tiny-width]">
			<span>
        		<div style="margin-top: 15px">
        			<small style="font-size: 15px;font-weight: bold;width: 25%">设备名称：</small>
        			<el-input style="width: 73%" size="small" v-model="changeNameObj.deviceName"></el-input>
        		</div>
        	</span>
			<span slot="footer" class="dialog-footer">
        		<el-button v-if="!changeNameObj.waitting" type="primary" @click="rename">确 定</el-button>
        		<i v-else class="el-icon-loading" style="font-size:25px"></i>
        	</span>
		</el-dialog>
		<el-dialog title="今日登录详情" v-model="loginDetailDialog" :class="[dialog-large-width]">
			<el-table border style="width: 100%" :data="loginDetailDatas">
				<el-table-column type="index" align="center" width="50px"></el-table-column>
				<el-table-column label="名称" align="center" prop="readername"></el-table-column>
				<el-table-column label="读者证号" align="center" prop="readercode"></el-table-column>
				<el-table-column label="读者标签" align="center" prop="readertag"></el-table-column>
				<el-table-column label="登录时间" align="center" prop="time"></el-table-column>
			</el-table>
			<div class="block" style="text-align:right">
				<el-pagination @current-change="handleLoginCurrentChange" :current-page="loginCurrentPage" :page-size="loginPageSize" layout="total,prev, pager, next, jumper" :total="loginTotalSize">
				</el-pagination>
			</div>
		</el-dialog>
		<el-dialog title="今日借阅详情" v-model="borrowDetailDialog" :class="[dialog-large-width]">
			<el-table border style="width: 100%" :data="borrowDetailDatas">
				<el-table-column type="index" align="center" width="50px"></el-table-column>
				<el-table-column label="书名" align="center" prop="BookName"></el-table-column>
				<el-table-column label="图书条码" align="center" prop="BookCode"></el-table-column>
				<el-table-column label="图书标签" align="center" prop="BookTagCode"></el-table-column>
				<el-table-column label="读者条码" align="center" prop="ReaderCode"></el-table-column>
				<el-table-column label="借书时间" align="center" prop="BorrowTime"></el-table-column>
			</el-table>
			<div class="block" style="text-align:right">
				<el-pagination @current-change="handleBorrowCurrentChange" :current-page="borrowCurrentPage" :page-size="borrowPageSize" layout="total,prev, pager, next, jumper" :total="borrowTotalSize">
				</el-pagination>
			</div>
		</el-dialog>
		<el-dialog title="今日还书详情" v-model="returnDetailDialog" :class="[dialog-large-width]">
			<el-table border style="width: 100%" :data="returnDetailDatas">
				<el-table-column type="index" align="center" width="50px"></el-table-column>
				<el-table-column label="书名" align="center" prop="BookName"></el-table-column>
				<el-table-column label="图书条码" align="center" prop="BookCode"></el-table-column>
				<el-table-column label="图书标签" align="center" prop="BookTagCode"></el-table-column>
				<el-table-column label="读者条码" align="center" prop="ReaderCode"></el-table-column>
				<el-table-column label="还书时间" align="center" prop="RealReturnTime"></el-table-column>
			</el-table>
			<div class="block" style="text-align:right">
				<el-pagination @current-change="handleReturnCurrentChange" :current-page="returnCurrentPage" :page-size="returnPageSize" layout="total,prev, pager, next, jumper" :total="returnTotalSize">
				</el-pagination>
			</div>
		</el-dialog>
		<el-dialog title="设备故障记录" v-model="failureDialog" :class="[dialog-large-width]">
			<div style="padding-bottom: 2px">
				<span style="font-size: 13px;font-weight: bold">{{$t('message.start')}}</span>
				<el-date-picker :editable="false" :clearable="false" size="small" type="date" v-model="failureStartTime" placeholder="选择起始日期" @change="changeFailureStartTime"></el-date-picker>
				<span style="font-size: 13px;font-weight: bold">{{$t('message.end')}}</span>
				<el-date-picker :editable="false" :clearable="false" size="small" type="date" v-model="failureEndTime" placeholder="选择结束日期" @change="changeFailureEndTime"></el-date-picker>
			</div>
			<el-table border :data="failureDatas">
				<el-table-column :show-overflow-tooltip="true" type="selection"></el-table-column>
				<el-table-column :show-overflow-tooltip="true" label="设备" align="center" prop="name"></el-table-column>
				<el-table-column :show-overflow-tooltip="true" label="故障代码" align="center" prop="code"></el-table-column>
				<el-table-column :show-overflow-tooltip="true" label="故障时间" align="center" prop="time"></el-table-column>
				<el-table-column :show-overflow-tooltip="true" label="故障描述" align="center" prop="desc">
				</el-table-column>
			</el-table>
			<div class="block" style="text-align:right">
				<el-pagination @size-change="handleFailureSizeChange" @current-change="handleFailureCurrentChange" :current-page="failureCurrentPage" :page-size="failurePageSize" :page-sizes="[10, 20, 30, 40, 50]" layout="total,sizes, prev, pager, next, jumper" :total="failureTotalSize">
				</el-pagination>
			</div>
		</el-dialog>
		<el-dialog title="设备异常报告" v-model="expDialog" :class="[dialog-large-width]">
			<div style="padding-bottom: 2px">
				<span style="font-size: 13px;font-weight: bold">{{$t('message.start')}}</span>
				<el-date-picker :editable="false" :clearable="false" size="small" type="date" v-model="expStartTime" placeholder="选择起始日期" @change="changeExpStartTime"></el-date-picker>
				<span style="font-size: 13px;font-weight: bold">{{$t('message.end')}}</span>
				<el-date-picker :editable="false" :clearable="false" size="small" type="date" v-model="expEndTime" placeholder="选择结束日期" @change="changeExpEndTime"></el-date-picker>
			</div>
			<el-table border :data="expDatas">
				<el-table-column :show-overflow-tooltip="true" type="index" align="center"></el-table-column>
				<el-table-column :show-overflow-tooltip="true" label="设备" align="center" prop="name"></el-table-column>
				<el-table-column :show-overflow-tooltip="true" label="应用名称" align="center" prop="appname"></el-table-column>
				<el-table-column :show-overflow-tooltip="true" label="应用版本" align="center" prop="appver"></el-table-column>
				<el-table-column :show-overflow-tooltip="true" label="异常时间" align="center" prop="time"></el-table-column>
				<el-table-column :show-overflow-tooltip="true" label="异常描述" align="center" prop="desc">
				</el-table-column>
			</el-table>
			<div class="block" style="text-align:right">
				<el-pagination @size-change="handleExpSizeChange" @current-change="handleExpCurrentChange" :current-page="expCurrentPage" :page-size="expPageSize" :page-sizes="[10, 20, 30, 40, 50]" layout="total,sizes, prev, pager, next, jumper" :total="expTotalSize">
				</el-pagination>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	// window['control_loopModel'] = null;
	// window['control_loopTime'] = 500000;
	import $ from 'jquery';
	import swf from '../../../../assets/js/swfobject.js'
	import headerOpreate from '../../../../components/headerOpreate'
	import { GloabFun, HttpServer } from '../../../../assets/js/common.js'
	import { Animation } from '../../../../assets/js/common.js'
	import noRecord from '../../../../assets/images/noRecord.jpg'
	import imgDefault from '../../../../assets/images/title-right.png'
	var date = new Date();
	var that = null;
	var flag = true;

	export default {
		components: {
			headerOpreate
		},
		data() {
			Date.prototype.format = function(format) {
				var date = {
					"M+": this.getMonth() + 1,
					"d+": this.getDate()
				};
				if(/(y+)/i.test(format)) {
					format = format.replace(RegExp.$1, (this.getFullYear() + '').substr(4 - RegExp.$1.length));
				}
				for(var k in date) {
					if(new RegExp("(" + k + ")").test(format)) {
						format = format.replace(RegExp.$1, RegExp.$1.length == 1 ?
							date[k] : ("00" + date[k]).substr(("" + date[k]).length));
					}
				}
				return format;
			}
			return {
				pingTime: "",
				imgTitleUrl: imgDefault,
				startTime: new Date((date.getTime() - 3600 * 1000 * 24 * 0)).format('yyyy-MM-dd') + ' 00:00:00',
				endTime: date.format('yyyy-MM-dd') + ' 23:59:59',
				IsOnLine: false, //设备是否在线
				loading: false, //数据加载
				devideInfoData: [],
				deviceUseSumaryData: {},
				statusDatas: {},
				configDatas: {},
				recordFileSizeDialog: false,
				recordDurationObj: {},
				defaultRecordDuration: '',

				recordDurationDialog: false,
				recordFileSizeObj: {},
				defaultRecordFileSize: '',

				cardTypeRadio: 0,
				cardTypeDialog: false,
				setCardTypeObj: {},

				poweronDialog: false,
				setPowerOnObj: {},
				// powerOnTimeValue:new Date(),
				powerOnTimeValue: '',

				poweroffDialog: false,
				setPowerOffObj: {},
				// powerOffTimeValue:new Date(),
				powerOffTimeValue: '',

				//故障记录
				failureDialog: false,
				failureDatas: [],
				failureCurrentPage: 1,
				failurePageSize: 10,
				failureTotalSize: 0,
				failureStartTime: new Date((date.getTime() - 3600 * 1000 * 24 * 7)).format('yyyy-MM-dd') + ' 00:00:00',
				failureEndTime: date.format('yyyy-MM-dd') + ' 23:59:59',

				//异常报告
				expDialog: false,
				expDatas: [],
				expCurrentPage: 1,
				expPageSize: 10,
				expTotalSize: 0,
				expStartTime: new Date((date.getTime() - 3600 * 1000 * 24 * 7)).format('yyyy-MM-dd') + ' 00:00:00',
				expEndTime: date.format('yyyy-MM-dd') + ' 23:59:59',

				//登录详情
				loginDetailDialog: false,
				loginDetailDatas: [],
				loginCurrentPage: 1,
				loginPageSize: 10,
				loginTotalSize: 0,
				//借书详情
				borrowDetailDialog: false,
				borrowDetailDatas: [],
				borrowCurrentPage: 1,
				borrowPageSize: 10,
				borrowTotalSize: 0,
				//还书详情
				returnDetailDialog: false,
				returnDetailDatas: [],
				returnCurrentPage: 1,
				returnPageSize: 10,
				returnTotalSize: 0,
				documentlocationDialog: false,
				renameDeviceDialog: false,
				refreshObj: {
					waitting: false
				},
				SyncObj: {
					waitting: false
				},
				changeNameObj: {
					waitting: false,
					deviceName: ''
				},
				restartObj: {
					waitting: false
				},
				closeObj: {
					waitting: false
				},
				powerOnObj: {
					waitting: false
				},
				powerOffObj: {
					waitting: false
				},
				setRecordFileSizeObj: {
					waitting: false
				},
				setRecordDurationObj: {
					waitting: false
				},
				machineCaptureDatas: [],
				imgUrl: noRecord
			}
		},
		props: {
			templateObj: {
				type: Object,
				default: {}
			}
		},
		methods: {
			executeAction(action) {
				if(action) {
					this[action]();
				}
			},
			formateCaptureData(array) {
				for(var i = 0; i < array.length; i++) {
					var index1 = array[i].time.indexOf("T");
					array[i].time = array[i].time.substring(0, index1) + " " + array[i].time.substring(index1 + 1, index1 + 9);
				}
			},
			//获取历史监控抓拍图片
			getMachineCapture() {
				HttpServer.httpPost.call(this, '/Api/MachineCapture/List', {
					sn: this.templateObj.sn,
					UserId: parseInt(GloabFun.getKeyId()),
					index: 1,
					pagesize: 14,
				}, function(response) {}, function(response) {
					if(response.data.code === 0) {
						this.formateCaptureData(response.data.list);
						this.machineCaptureDatas = response.data.list;
					} else {
						this.$notify.error({
							title: '错误',
							message: response.data.msg,
							duration: 2500
						});
					}
				})
			},
			//查看更多抓拍图片
			goMachineCapture() {
				this.$emit('changeView', 'AutoCapture', this.templateObj)
			},
			backPrev() {
				// this.$emit('changeView', "controlList", {})
			},
			openFailure() {
				this.getFailureDatas();
				this.failureDialog = true;
			},
			//查询设备故障记录
			getFailureDatas() {
				var param = {
					index: this.failureCurrentPage,
					pagesize: this.failurePageSize,
					sn: [this.templateObj.sn],
					begin: this.failureStartTime,
					end: this.failureEndTime,
					type: 2,
					filter: ''
				}
				HttpServer.httpPost.call(this, '/Api/Device/Failure', param, function(response) {}, function(response) {
					// console.log('故障信息',response);
					if(response.data.code === 0) {
						this.failureDatas = response.data.failure;
						this.failureTotalSize = response.data.totalcount;
					} else {
						this.$notify.error({
							title: '错误',
							message: response.data.msg,
							duration: 2500
						});
					}
				});
			},
			changeFailureStartTime(val) {
				this.failureStartTime = val + ' 00:00:00';
				this.getFailureDatas();
			},
			changeFailureEndTime(val) {
				this.failureEndTime = val + ' 23:59:59';
				this.getFailureDatas();
			},
			handleFailureCurrentChange(val) {
				this.failureCurrentPage = val;
				this.getFailureDatas();
			},
			handleFailureSizeChange(val) {
				this.failurePageSize = val;
				this.getFailureDatas();
			},

			openExp() {
				this.getExpDatas();
				this.expDialog = true;
			},
			getExpDatas() {
				var param = {
					index: this.expCurrentPage,
					pagesize: this.expPageSize,
					sn: [this.templateObj.sn],
					begin: this.expStartTime,
					end: this.expEndTime,
					type: 2,
					filter: ''
				}
				HttpServer.httpPost.call(this, '/Api/Device/AppException', param, function(response) {}, function(response) {
					if(response.data.code === 0) {
						this.expDatas = response.data.exp;
						this.expTotalSize = response.data.totalcount;
					} else {
						this.$notify.error({
							title: '错误',
							message: response.data.msg,
							duration: 2500
						});
					}
				})
			},
			changeExpStartTime(val) {
				this.expStartTime = val + ' 00:00:00';
				this.getExpDatas();
			},
			changeExpEndTime(val) {
				this.expEndTime = val + ' 23:59:59';
				this.getExpDatas();
			},
			handleExpCurrentChange(val) {
				this.expCurrentPage = val;
				this.getExpDatas();
			},
			handleExpSizeChange(val) {
				this.expPageSize = val;
				this.getExpDatas();
			},

			//获取设备使用情况信息
			getDeviceUseSumary() {
				HttpServer.httpPost.call(this, '/Api/Device/UseSumary', {
					sn: this.templateObj.sn,
					begin: this.startTime,
					end: this.endTime
				}, function(response) {}, function(response) {
					// console.log('设备使用情况',response);
					if(response.data.code === 0) {
						this.deviceUseSumaryData = response.data;
					}
				});
			},
			//修改名称
			changeName(row) {
				if(this.IsOnLine) {
					this.changeNameObj.deviceName = row.name;
					this.renameDeviceDialog = true;
				} else {
					this.$notify({
						title: this.$t('message.warning'),
						message: '设备处于离线状态，不可控制',
						type: 'warning',
						duration: 2500
					});
				}
			},
			//修改名称
			rename() {
				this.changeNameObj.waitting = true;
				this.$nextTick(function() {
					var paramContent = {
						name: this.changeNameObj.deviceName
					}
					HttpServer.httpPost.call(this, '/Api/User/Command/Send', {
						cmd: 10001,
						sn: [this.templateObj.sn],
						content: JSON.stringify(paramContent)
					}, function(response) {}, function(response) {
						this.changeNameObj.waitting = false;
						if(response.data.code === 0) {
							// console.log('设备重命名',response);
							if(response.data.response.length > 0) {
								for(var i = 0; i < response.data.response.length; i++) {
									if((response.data.response)[i].sn == this.templateObj.sn && (response.data.response)[i].code === 0) {
										this.devideInfoData[0].name = this.changeNameObj.deviceName;
										this.renameDeviceDialog = false;
										this.
										this.$notify({
											title: '成功',
											message: this.$t('message.operationSuccess'),
											type: 'success',
											duration: 2500
										});
									} else {
										this.$notify.error({
											title: '错误',
											message: this.$t('message.operationFailed'),
											duration: 2500
										});
									}
								}
							} else {
								this.$notify.error({
									title: '错误',
									message: this.$t('message.operationFailed'),
									duration: 2500
								});
							}
						} else {
							this.$notify.error({
								title: '错误',
								message: response.data.msg,
								duration: 2500
							});
						}
					})
				})
			},
			//重启
			restart() {
				if(this.IsOnLine) {
					clearInterval(this.autoDeviceDetailIntervalid);
					this.$nextTick(function() {
						this.restartObj.waitting = true;
						HttpServer.httpPost.call(this, '/Api/Peripheral/WTControl', {
							op: 2,
							sn: [this.templateObj.sn],
							version: ''
						}, function(response) {}, function(response) {
							if(response.data.code === 0) {
								// console.log('设备重启',response);
								if(response.data.response.length > 0) {
									for(var i = 0; i < response.data.response.length; i++) {
										if((response.data.response)[i].sn == this.templateObj.sn && (response.data.response)[i].code === 0) {
											this.$notify({
												title: '成功',
												message: this.$t('message.operationSuccess'),
												type: 'success',
												duration: 2500
											});
										} else {
											this.$notify.error({
												title: '错误',
												message: response.data.response[i].msg,
												duration: 2500
											});
										}
									}
								} else {
									this.$notify.error({
										title: '错误',
										message: this.$t('message.operationFailed'),
										duration: 2500
									});
								}
							} else {
								this.$notify.error({
									title: '错误',
									message: this.$t('message.operationFailed'),
									duration: 2500
								});
							}
							this.autoDeviceDetailIntervalid = setInterval(() => {
								this.getDeviceUseSumary();
								this.getDatas();
							}, 5000)
							this.restartObj.waitting = false;
						})
					})
				} else {
					this.$notify({
						title: this.$t('message.warning'),
						message: '设备处于离线状态，不可控制',
						type: 'warning',
						duration: 2500
					});
				}
			},
			//关机
			close() {
				if(this.IsOnLine) {
					clearInterval(this.autoDeviceDetailIntervalid);
					this.$nextTick(function() {
						this.closeObj.waitting = true;
						HttpServer.httpPost.call(this, '/Api/Peripheral/WTControl', {
							op: 1,
							sn: [this.templateObj.sn],
							version: ''
						}, function(response) {}, function(response) {
							if(response.data.code === 0) {
								// console.log('关闭设备',response);
								if(response.data.response.length > 0) {
									for(var i = 0; i < response.data.response.length; i++) {
										if((response.data.response)[i].sn == this.templateObj.sn && (response.data.response)[i].code === 0) {
											this.$notify({
												title: '成功',
												message: this.$t('message.operationSuccess'),
												type: 'success',
												duration: 2500
											});
										} else {
											this.$notify.error({
												title: '错误',
												message: response.data.response[i].msg,
												duration: 2500
											});
										}
									}
								} else {
									this.$notify.error({
										title: '错误',
										message: this.$t('message.operationFailed'),
										duration: 2500
									});
								}
							} else {
								this.$notify.error({
									title: '错误',
									message: response.data.msg,
									duration: 2500
								});
							}
							this.autoDeviceDetailIntervalid = setInterval(() => {
								this.getDeviceUseSumary();
								this.getDatas();
							}, 5000)
							this.closeObj.waitting = false;
						})
					})
				} else {
					this.$notify({
						title: this.$t('message.warning'),
						message: '设备处于离线状态，不可控制',
						type: 'warning',
						duration: 2500
					});
				}
			},
			//去掉时间中的T
			formateData(array) {
				for(var i = 0; i < array.length; i++) {
					var index1 = array[i].bindtime.indexOf("T");
					array[i].bindtime = array[i].bindtime.substring(0, index1) + " " + array[i].bindtime.substring(index1 + 1, index1 + 9);
				}
			},
			//录像开关
			controlVoice() {
				if(this.IsOnLine) {
					clearInterval(this.autoDeviceDetailIntervalid);
					this.$nextTick(function() {
						this.configDatas.voiceWaitting = true;
						HttpServer.httpPost.call(this, '/Api/Peripheral/EnableVoice', {
							sn: [this.templateObj.sn],
							version: '',
							onoff: this.configDatas.voiceSwitch ? 0 : 1
						}, function(response) {}, function(response) {
							if(response.data.code === 0) {
								// console.log('控制录像开关',response);
								if(response.data.response.length > 0) {
									for(var i = 0; i < response.data.response.length; i++) {
										if((response.data.response)[i].sn == this.templateObj.sn && (response.data.response)[i].code === 0) {
											this.configDatas.enablevoice = !this.configDatas.enablevoice;
											this.$notify({
												title: '成功',
												message: this.$t('message.operationSuccess'),
												type: 'success',
												duration: 2500
											});
										} else {
											this.configDatas.voiceSwitch = !this.configDatas.voiceSwitch;
											this.$notify.error({
												title: '错误',
												message: response.data.response[i].msg,
												duration: 2500
											});
										}
									}
								} else {
									this.configDatas.voiceSwitch = !this.configDatas.voiceSwitch;
									this.$notify.error({
										title: '错误',
										message: this.$t('message.operationFailed'),
										duration: 2500
									});
								}
							} else {
								this.configDatas.voiceSwitch = !this.configDatas.voiceSwitch;
								this.$notify.error({
									title: '错误',
									message: response.data.msg,
									duration: 2500
								});
							}
							this.autoDeviceDetailIntervalid = setInterval(() => {
								this.getDeviceUseSumary();
								this.getDatas();
							}, 5000)
							this.configDatas.voiceWaitting = false;
						});
					})
				} else {
					this.$notify({
						title: this.$t('message.warning'),
						message: '设备处于离线状态，不可控制',
						type: 'warning',
						duration: 2500
					});
					this.configDatas.voiceSwitch = !this.configDatas.voiceSwitch;
				}
			},
			//设置录像文件大小
			openRecordFileSizeDialog() {
				if(this.IsOnLine) {
					this.recordFileSizeDialog = true;
					this.recordFileSizeObj = this.configDatas;
					this.defaultRecordFileSize = this.configDatas.recordfilesize;
				} else {
					this.$notify({
						title: this.$t('message.warning'),
						message: '设备处于离线状态，不可控制',
						type: 'warning',
						duration: 2500
					});
				}
			},
			//确定修改录像文件大小
			changeRecordFileSize() {
				// console.log('this.defaultRecordFileSize',this.defaultRecordFileSize)
				clearInterval(this.autoDeviceDetailIntervalid);
				this.$nextTick(function() {
					this.setRecordFileSizeObj.waitting = true;
					HttpServer.httpPost.call(this, '/Api/Peripheral/RecordSizeSet', {
						sn: [this.templateObj.sn],
						size: this.defaultRecordFileSize,
						version: ''
					}, function(response) {}, function(response) {
						if(response.data.code === 0) {
							// console.log('修改录像文件大小',response);
							if(response.data.response.length > 0) {
								for(var i = 0; i < response.data.response.length; i++) {
									if((response.data.response)[i].sn == this.templateObj.sn && (response.data.response)[i].code === 0) {
										this.$notify({
											title: '成功',
											message: this.$t('message.operationSuccess'),
											type: 'success',
											duration: 2500
										});
									} else {
										this.$notify.error({
											title: '错误',
											message: response.data.response[i].msg,
											duration: 2500
										});
									}
								}
							} else {
								this.$notify.error({
									title: '错误',
									message: this.$t('message.operationFailed'),
									duration: 2500
								});
							}
						} else {
							this.$notify.error({
								title: '错误',
								message: response.data.msg,
								duration: 2500
							});
						}
						this.autoDeviceDetailIntervalid = setInterval(() => {
							this.getDeviceUseSumary();
							this.getDatas();
						}, 5000)
						this.setRecordFileSizeObj.waitting = false;
					})
				})
			},
			//设置录像时间间隔
			openRecordDurationDialog() {
				if(this.IsOnLine) {
					this.recordDurationDialog = true;
					this.recordDurationObj = this.configDatas;
					this.defaultRecordDuration = this.configDatas.recordfileduration;
				} else {
					this.$notify({
						title: this.$t('message.warning'),
						message: '设备处于离线状态，不可控制',
						type: 'warning',
						duration: 2500
					});
				}
			},
			//确定修改录像时间间隔
			changeRecordDuration() {
				clearInterval(this.autoDeviceDetailIntervalid);
				this.$nextTick(function() {
					this.setRecordDurationObj.waitting = true;
					HttpServer.httpPost.call(this, '/Api/Peripheral/RecordTimeSet', {
						sn: [this.templateObj.sn],
						time: this.defaultRecordDuration,
						version: ''
					}, function(response) {}, function(response) {
						if(response.data.code === 0) {
							// console.log('修改录像时间间隔',response);
							if(response.data.response.length > 0) {
								for(var i = 0; i < response.data.response.length; i++) {
									if((response.data.response)[i].sn == this.templateObj.sn && (response.data.response)[i].code === 0) {
										this.$notify({
											title: '成功',
											message: this.$t('message.operationSuccess'),
											type: 'success',
											duration: 2500
										});
									} else {
										this.$notify.error({
											title: '错误',
											message: response.data.response[i].msg,
											duration: 2500
										});
									}
								}
							} else {
								this.$notify.error({
									title: '错误',
									message: this.$t('message.operationFailed'),
									duration: 2500
								});
							}
						} else {
							this.$notify.error({
								title: '错误',
								message: response.data.msg,
								duration: 2500
							});
						}
						this.autoDeviceDetailIntervalid = setInterval(() => {
							this.getDeviceUseSumary();
							this.getDatas();
						}, 5000)
						this.setRecordDurationObj.waitting = false;
					})
				})
			},
			//刷新
			reloadDatas() {
				this.loading = true;
				HttpServer.httpPost.call(this, '/Api/Device/UseSumary', {
					sn: this.templateObj.sn,
					begin: this.startTime,
					end: this.endTime
				}, function(res) {}, function(res) {
					if(res.data.code === 0) {
						this.deviceUseSumaryData = res.data;
						HttpServer.httpPost.call(this, '/Api/AutoBookracks/AllInfo', {
							sn: this.templateObj.sn
						}, function(response) {}, function(response) {
							this.loading = false;
							if(response.data.code === 0) {
								this.pingTime = response.data.pingtime;
								this.devideInfoData = [];
								if(response.data.config != null) {
									response.data.config.voiceSwitch = response.data.config.enablevoice ? false : true;
									response.data.config.voiceWaitting = false;
									this.configDatas = response.data.config;
								}
								if(response.data.status != null) {
									this.statusDatas = response.data.status;
									this.templateObj.appname = response.data.status.appname;
									this.templateObj.appver = response.data.status.appver;
									this.devideInfoData.push(this.templateObj);
								}
								this.$notify({
									title: '成功',
									message: this.$t('message.refreshSuccess'),
									type: 'success',
									duration: 2500
								});
							} else {
								this.$notify.error({
									title: '错误',
									message: response.data.msg,
									duration: 2500
								});
							}
						});
					} else {
						this.loading = false;
						this.$notify.error({
							title: '错误',
							message: res.data.msg,
							duration: 2500
						});
					}
				});
			},
			//查看登录详情
			loginDetail() {
				this.loginDetailDialog = true;
				this.getLoginDetailData();
			},
			handleLoginCurrentChange(val) {
				this.loginCurrentPage = val;
				this.getLoginDetailData();
			},
			//获取登录详情数据
			getLoginDetailData() {
				HttpServer.httpPost.call(this, '/Api/Device/DeviceDetail', {
					begin: this.startTime,
					end: this.endTime,
					pagesize: this.loginPageSize,
					index: this.loginCurrentPage,
					devicesn: this.templateObj.sn
				}, function(response) {}, function(response) {
					if(response.data.code === 0) {
						this.loginDetailDatas = response.data.info;
						this.loginTotalSize = response.data.total;
					} else {
						this.$notify.error({
							title: '错误',
							message: response.data.msg,
							duration: 2500
						});
					}
				})
			},
			borrowDetail() {
				this.borrowDetailDialog = true;
				this.getBorrowDetailData();
			},
			handleBorrowCurrentChange(val) {
				this.borrowCurrentPage = val;
				this.getBorrowDetailData();
			},
			//去掉时间中的T
			formateData2(array) {
				for(var i = 0; i < array.length; i++) {
					var index1 = array[i].BorrowTime.indexOf("T");
					array[i].BorrowTime = array[i].BorrowTime.substring(0, index1) + " " + array[i].BorrowTime.substring(index1 + 1, index1 + 9);
				}
			},
			getBorrowDetailData() {
				HttpServer.httpPost.call(this, '/Api/Device/DeviceSumaryByModel/DeviceBorrowInfo', {
					begin: this.startTime,
					end: this.endTime,
					pagesize: this.borrowPageSize,
					index: this.borrowCurrentPage,
					devicesn: this.templateObj.sn,
					type: 0
				}, function(response) {}, function(response) {
					if(response.data.code === 0) {
						this.formateData2(response.data.info);
						this.borrowDetailDatas = response.data.info;
						this.borrowTotalSize = response.data.total;
					} else {
						this.$notify.error({
							title: '错误',
							message: response.data.msg,
							duration: 2500
						});
					}
				})
			},
			returnDetail() {
				this.returnDetailDialog = true;
				this.getReturnDetailData();
			},
			handleReturnCurrentChange(val) {
				this.returnCurrentPage = val;
				this.getReturnDetailData();
			},
			//去掉时间中的T
			formateData3(array) {
				for(var i = 0; i < array.length; i++) {
					var index1 = array[i].RealReturnTime.indexOf("T");
					array[i].RealReturnTime = array[i].RealReturnTime.substring(0, index1) + " " + array[i].RealReturnTime.substring(index1 + 1, index1 + 9);
				}
			},
			getReturnDetailData() {
				HttpServer.httpPost.call(this, '/Api/Device/DeviceSumaryByModel/DeviceBorrowInfo', {
					begin: this.startTime,
					end: this.endTime,
					pagesize: this.returnPageSize,
					index: this.returnCurrentPage,
					devicesn: this.templateObj.sn,
					type: 1
				}, function(response) {}, function(response) {
					this.loading = false;
					if(response.data.code === 0) {
						this.formateData3(response.data.info);
						this.returnDetailDatas = response.data.info;
						this.returnTotalSize = response.data.total;
					} else {
						this.$notify.error({
							title: '错误',
							message: response.data.msg,
							duration: 2500
						});
					}
				})
			},
			//同步设备状态
			SyncDeviceUseSumary() {
				if(this.IsOnLine) {
					this.SyncObj.waitting = true;
					this.$nextTick(function() {
						var paramContent = {
							action: "update"
						}
						HttpServer.httpPost.call(this, '/Api/User/Command/Send', {
							cmd: 10027,
							sn: [this.templateObj.sn],
							content: JSON.stringify(paramContent)
						}, function(response) {}, function(response) {
							this.SyncObj.waitting = false;
							if(response.data.code === 0) {
								// console.log('刷新',response);
								if(response.data.response.length > 0) {
									for(var i = 0; i < response.data.response.length; i++) {
										if((response.data.response)[i].sn == this.templateObj.sn && (response.data.response)[i].code === 0) {}
									}
									this.$notify({
										title: '成功',
										message: '数据同步成功',
										type: 'success',
										duration: 2500
									});
								} else {
									this.$notify.error({
										title: '错误',
										message: response.data.msg,
										duration: 2500
									});
								}
							} else {
								this.$notify.error({
									title: '错误',
									message: response.data.msg,
									duration: 2500
								});
							}
						})
					})
				} else {
					this.$notify({
						title: this.$t('message.warning'),
						message: '设备处于离线状态，不可控制',
						type: 'warning',
						duration: 2500
					});
				}
			},
			getDatas() {
				// this.loading = true;
				HttpServer.httpPost.call(this, '/Api/AutoBookracks/AllInfo', {
					sn: this.templateObj.sn
				}, function(response) {}, function(response) {
					// console.log('设备详情',response)
					// this.loading = false;
					if(response.data.code === 0) {
						this.pingTime = response.data.pingtime;
						this.devideInfoData = [];
						if(response.data.config != null) {
							response.data.config.voiceSwitch = response.data.config.enablevoice ? false : true;
							response.data.config.voiceWaitting = false;
							this.configDatas = response.data.config;
						}
						if(response.data.status != null) {
							this.statusDatas = response.data.status;
							this.templateObj.appname = response.data.status.appname;
							this.templateObj.appver = response.data.status.appver;
							this.devideInfoData.push(this.templateObj);
						}
					} else {
						// this.$message.error(response.data.msg);
					}
				});
			},
			//定时刷新设备详情右边部分及使用情况
			getTimeDeviceDetail() {
				window.autoDeviceDetailIntervalid = setInterval(() => {
					this.getDeviceUseSumary();
					HttpServer.httpPost.call(this, '/Api/AutoBookracks/AllInfo', {
						sn: this.templateObj.sn
					}, function(response) {}, function(response) {
						if(response.data.code === 0) {
							this.devideInfoData = [];
							if(response.data.config != null) {
								response.data.config.voiceSwitch = response.data.config.enablevoice ? false : true;
								response.data.config.voiceWaitting = false;
								this.configDatas = response.data.config;
							}
							if(response.data.status != null) {
								this.statusDatas = response.data.status;
								this.templateObj.appname = response.data.status.appname;
								this.templateObj.appver = response.data.status.appver;
								this.devideInfoData.push(this.templateObj);
							}
						} else {
							// this.$message.error(response.data.msg);
						}
					});
				}, 5000)
			}
		},
		created() {
			this.IsOnLine = this.templateObj.online;
			this.getDatas();
			this.getDeviceUseSumary();
			this.getMachineCapture();
			if(this.templateObj.online) {
				// this.getTimeDeviceDetail();
				this.autoDeviceDetailIntervalid = setInterval(() => {
					this.getDeviceUseSumary();
					this.getDatas();
				}, 5000)
			}
		},
		beforeDestroy() {
			clearInterval(this.autoDeviceDetailIntervalid);
		},
		// destoryed(){
		//  		clearInterval(window.autoDeviceDetailIntervalid);
		// }	
	}
</script>

<style scoped>
	@import '../../../../assets/css/font-awesome-4.7.0/css/font-awesome.css';
</style>
<style scoped lang="less">
	@import '../../../../assets/css/media-screen.less';
</style>

<style scoped lang="less">
	* {
		box-sizing: border-box;
	}
	
	.el-date-editor.el-input {
		width: 115px;
	}
	
	.inner-section {
		// margin: 5px 5px;
		// height: 100%;
		// border: 1px solid #BEBEBE;
		.flash-object {
			// margin: 5px 0;
			height: 368px;
			// height: e("calc(100% - 40px)");
			position: relative;
		}
		.opreat-button {
			//text-align: center;
		}
	}
	
	.navList {
		width: 100%;
		padding: 3px 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.el-row {
		margin-bottom: 5px;
		.bg-purple {
			width: 100%;
			// background: #EAF4FF;
			.detail-title {
				text-align: center;
				display: flex;
				flex-direction: column;
			}
			.middle-section {
				width: 100%;
				display: flex;
				.middle-bg {}
			}
			.icon-default {
				color: #999999;
			}
			.panel-title {
				width: 100%;
				height: 25px;
				color: white;
				// background-color: rgba(32,160,255,.2);
				background-color: #20A0FF;
				border-radius: 3px;
				// border-bottom: 1px solid #20A0FF;
				line-height: 25px;
				padding-left: 10px;
				.title-img {
					width: 30%;
					float: right;
					height: 100%;
					width: 100px
				}
			}
			.detail-section {
				width: 100%;
				height: 80px;
				display: flex;
				justify-content: space-around;
				.section-left {
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					align-items: center;
					width: 40%;
					height: 100%;
				}
				.section-right {
					text-align: left;
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					// align-items: center;
					width: 60%;
					padding: 3px;
					// padding-left: 6px;
					height: 100%;
				}
			}
			.detail-section-3 {
				height: 100px;
				width: 100%;
				display: flex;
				justify-content: space-around;
				>div {
					display: flex;
					align-items: center;
					justify-content: space-around;
					flex-direction: column;
					width: 33%;
					height: 100%;
					.icon {
						height: 44px;
						line-height: 55px;
						i {
							font-size: 43px;
						}
					}
				}
			}
			.detail-section-2 {
				height: 150px;
				width: 100%;
				>div:nth-of-type(1) {
					border-bottom: 1px solid #7f93aa;
					display: flex;
					flex-direction: column;
					justify-content: space-around;
				}
				>div {
					height: 50%;
					display: flex;
					flex-direction: column;
					justify-content: space-around;
				}
			}
		}
	}
	
	.grid-content {
		border: 1px solid #FFFFFF;
		height: 400px;
	}
	
	.grid-content1 {
		box-shadow: 0 1px 4px #000;
		border-radius: 5px;
		margin-top: 1px;
		height: 100%;
	}
	
	.row-bg {
		padding: 10px 0;
		background-color: #f9fafc;
	}
    .mb5{
        margin-bottom: 5px;
    }
</style>